<script type="text/html" data-template-name="notify">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
        <div style="display: inline-block; width: calc(100% - 105px)">
            <input type="text" id="node-input-name"
                   data-i18n="[placeholder]common.label.name">
        </div>
    </div>
    <div class="form-row">
        <label for="node-input-notify-type"><i class="fa fa-archive"></i> <span
                data-i18n="notify.label.type"></span></label>
        <div style="display: inline-block; width: calc(100% - 105px)">
            <select id="node-input-notify-type">

            </select>
        </div>
    </div>
    <div class="form-row">
        <label for="node-input-provider"><i class="fa fa-group"></i> <span data-i18n="notify.label.provider"></span></label>
        <div style="display: inline-block; width: calc(100% - 105px)">
            <select id="node-input-provider">
                <option value="">-请先选择类型-</option>
            </select>
        </div>
    </div>
    <div class="form-row">
        <label for="node-input-notify-id"><i class="fa fa-flag"></i> <span data-i18n="notify.label.config"></span></label>
        <div style="display: inline-block; width: calc(100% - 105px)">
            <select id="node-input-notify-id">
                <option value="">-请先选择类型-</option>
            </select>
        </div>
    </div>
    <div class="form-row">
        <label for="node-input-template-id"><i class="fa fa-file-text"></i> <span
                data-i18n="notify.label.template"></span></label>
        <div style="display: inline-block; width: calc(100% - 105px)">
            <select id="node-input-template-id">
                <option value="">-请先选择类型-</option>
            </select>
        </div>
    </div>

    <div class="form-row var-container">

    </div>



</script>

<script type="text/javascript">
    RED.nodes.registerType('notify', {
        color: "#e08686",
        category: 'function',
        name:"消息通知",
        defaults: {
            notifyType: {value: "", required: true},
            notifierId: {value: "", required: true},
            provider: {value: "", required: true},
            templateId: {value: "", required: true},
            name: {value: ""},
            variables:{value:""}
        },
        inputs: 1,
        outputs: 0,
        icon: "envelope.svg",
        oneditsave:function (){
            me.changed=true;
        },
        label: function () {
            return this.name || "消息通知";
        },
        labelStyle: function () {
            return this.name ? "node_label_italic" : "";
        },
        oneditprepare: function () {
            var me = this;
            var type = $("#node-input-notify-type");
            var config = $("#node-input-notify-id");
            var provider = $("#node-input-provider");
            var template = $("#node-input-template-id");
            var templates={};
            var container=$(".var-container");
            type.on("change", function () {
                provider.html("");
                if ((me.notifyType = type.val())) {
                    $.ajax({
                        url: RED.settings.apiBaseUrl + "/notifier/config/type/" + type.val() + "/providers"
                    }).then(function (types) {

                        $(types.result).each(function () {
                            provider.append($("<option>").val(this.id).text(this.name))
                        });
                        if(types.result.length===0){
                            provider.append($("<option>").val("").text("-暂无服务商信息-"))
                        }
                        provider.val(me.provider);
                        provider.trigger("change")
                    })
                }
            });

            provider.on("change", function () {
                me.notifyProvider=provider.val();
                loadConfig();
                loadTemplate();
            });

            config.on("change",function () {
                me.notifierId=config.val();
            });

            template.on("change",function () {
                me.templateId=template.val();
                var templateData = templates[me.templateId];
                container.html("");
                if(templateData&&templateData.variableDefinitions){
                    container.html("模版变量(为空则以上游节点输入为准)");
                    $(templateData.variableDefinitions).each(function (){
                        var html = [
                            "  <div class=\"form-row\">",
                            "        <label for=\"node-input-var-"+this.id+"\"><i class=\"fa fa-pencil\"></i>",
                            "               <span>"+this.name+"</span></label>" ,
                            "        <div style=\"display: inline-block; width: calc(100% - 105px)\">" ,
                                         "<input class='var-input' type='text' var='"+this.id+"' id='node-input-var-"+this.id+"' " +
                                         "placeholder='"+this.name+"("+this.id+")'>",
                            "        </div>" ,
                            "    </div>"
                        ];
                        container.append($(html.join("")));
                        if(me.variables){
                         $(".var-input")
                            .each(function (){
                                var input = $(this);
                                input.val(me.variables[input.attr('var')]);
                            });
                        }
                    });
                }
            })

            function loadConfig() {
                if (type.val()) {
                    config.html("");
                    $.ajax({
                        url: RED.settings.apiBaseUrl + "/notifier/config/_query/no-paging?includes=id,name&paging=false&where=type=" + type.val()+" and provider="+provider.val()
                    }).then(function (types) {
                        $(types.result).each(function () {
                            config.append($("<option>").val(this.id).text(this.name))
                        });
                        if(types.result.length===0){
                            config.append($("<option>").val("").text("-暂无配置信息-"))
                        }
                        config.val(me.notifierId);
                    })
                }
            }

            function loadTemplate() {
                if (type.val()) {
                    template.html("");
                    $.ajax({
                        url: RED.settings.apiBaseUrl
                            +"/notifier/template/_query/no-paging?includes=id,name,variable_definitions&paging=false&where=type="
                            + (type.val())+" and provider="+(provider.val())
                    }).then(function (types) {
                        templates={};
                        $(types.result).each(function () {
                            templates[this.id]=this;
                            template.append($("<option>").val(this.id).text(this.name))
                        });
                        if(types.result.length===0){
                            template.append($("<option>").val("").text("-暂无模版信息-"))
                        }
                        template.val(me.templateId);
                        template.trigger("change")
                    })
                }
            }

            $.ajax({
                url: RED.settings.apiBaseUrl + "/notifier/config/types"
            }).then(function (response) {
                if (response.result) {
                    $(response.result).each(function () {
                        type.append($("<option>").val(this.id).text(this.name))
                    });
                    type.val(me.notifyType);
                    type.trigger("change")
                }

            })
        },
        oneditsave:function (){
            var vars={};
            $(".var-input")
                .each(function (){
                    var input = $(this);
                    vars[input.attr("var")]=input.val();
                });
            
            this.variables=vars;
        }
    });
</script>
